<demo-section [name]="name" [src]="src" [componentContent]="componentContent">
  <p>The <strong>sortable component</strong> represents a list of items, with ability to sort them or
  move to another container via drag&amp;drop. Input collection isn't mutated by the component,
  so events <code>ngModelChange</code>, <code>onChange</code> are using new collections.</p>

  <style>
    .sortable-item {
      padding: 6px 12px;
      margin-bottom: 4px;
      font-size: 14px;
      line-height: 1.4em;
      text-align: center;
      cursor: grab;
      border: 1px solid transparent;
      border-radius: 4px;
      border-color: #adadad;
    }

    .sortable-item-active {
      background-color: #e6e6e6;
      box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    }

    .sortable-wrapper {
      min-height: 150px;
    }
  </style>

  <docs-section [content]="componentContent"></docs-section>
</demo-section>
